<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {
          autoplay: "muted", //自动播放
          controls: true, //用户可以与之交互的控件
          loop: true, //视频一结束就重新开始
          muted: false, //默认情况下将使所有音频静音
          aspectRatio: "16:9", //显示比率
          fullscreen: {
            options: { navigationUI: "hide" },
          },
          sources: [
            {
              src: "http://vjs.zencdn.net/v/oceans.mp4",
              type: "video/mp4",
            },
          ],
        };
      },
    },
  },
  watch: {
    options: {
      handler(val) {
        this.player.src(val.sources)
      },
      deep: true
    },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.initPlay();
  },
  methods: {
    initPlay() {
      this.player = this.$video(
        this.$refs.videoPlayer,
        this.options,
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
    },
    clearPlay() {
      if (this.player) {
        this.player.dispose();
        this.player = null;
      }
    },
  },

  beforeDestroy() {
    this.clearPlay();
  },
};
</script>
